<route lang="json5" type="page" needLogin="false">
{
  style: {
    navigationBarTitleText: '美食详情',
  },
}
</route>
<template>
  <view class="bg-#fff overflow-auto w-100% h-screen box-border">
    <view style="position: relative">
      <wd-swiper
        :list="cuisineDetail.coverPhotoUrl ? cuisineDetail.coverPhotoUrl : []"
        autoplay
        height="446rpx"
        width="100%"
      ></wd-swiper>
      <view class="bg-#fff w-100% p-20rpx box-border detail-card">
        <view class="title mb-20rpx px-20rpx">{{ cuisineDetail.storeName }}</view>
        <view class="px-20rpx flex mb-20rpx" style="flex-wrap: wrap">
          <view class="mr-8rpx" v-for="(tag, index) in cuisineDetail.storeLabel" :key="index">
            <wd-tag color="#AD0E0E" bg-color="#AD0E0E" plain>
              {{ tag }}
            </wd-tag>
          </view>
        </view>
        <view class="message-card">
          <view class="flex items-center mb-20rpx">
            <wd-icon name="location" size="24px" color="#B9B9B9"></wd-icon>
            <view class="card-title">{{ cuisineDetail.storeAddr }}</view>
          </view>
          <view class="flex items-center mb-20rpx">
            <wd-icon name="money-circle" size="24px" color="#B9B9B9"></wd-icon>
            <view class="card-title">
              <span class="per-money mr-4rpx">￥{{ cuisineDetail.consumption }}/人</span>
            </view>
          </view>
          <view class="flex items-center mb-20rpx">
            <wd-icon name="call" size="24px" color="#B9B9B9"></wd-icon>
            <view class="card-title">{{ cuisineDetail.phone }}</view>
          </view>
        </view>
        <!-- 推荐菜 -->
        <view class="p-20rpx">
          <view class="recommendFoods mb-20rpx">推荐菜</view>
          <wd-row gutter="10" v-for="code in cuisineDetail.recommendFoods" :key="code.id">
            <wd-col :span="10">
              <view class="w-250rpx h-250rpx mb-20rpx mb-20rpx">
                <image class="w-100% h-100% border-rd-12rpx" :src="code.coverPhotoUrl"></image>
              </view>
            </wd-col>
            <wd-col :span="14">
              <view>
                <view class="title2 mb-20rpx">{{ code.name }}</view>
                <view class="ellipsis-3 remark mb-20rpx">{{ code.remark }}</view>
                <view class="mb-20rpx per-money">¥{{ code.price }}</view>
              </view>
            </wd-col>
          </wd-row>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { getCuisineDetails } from '@/service/TouristManagement/MyCuisine'
const baseurl = ref(import.meta.env.VITE_SERVER_BASEURL)
const cuisineDetail = ref({})
onLoad(async (options) => {
  const data: any = await getCuisineDetails(Number(options.id))
  cuisineDetail.value = { ...data.data }
  cuisineDetail.value.storeLabel = cuisineDetail.value.storeLabel.split(',')

  const coverPhotoUrlParts = cuisineDetail.value.fileDOList
  const processedCoverPhotoUrls = coverPhotoUrlParts.map((urlPart) => {
    const trimmedUrlPart = urlPart.url.trim()
    return baseurl.value + trimmedUrlPart
  })
  cuisineDetail.value.coverPhotoUrl = processedCoverPhotoUrls || []
  cuisineDetail.value.recommendFoods = cuisineDetail.value.recommendFoods.map((food, index) => {
    const foods = food.fileDOList.map((val) => {
      return baseurl.value + val.url
    })
    return {
      ...food,
      coverPhotoUrl: foods ? foods.toString() : '',
    }
  })
})
</script>
<style lang="scss" scoped>
.title {
  color: rgb(59, 59, 59);
  font-size: 56rpx;
  text-align: left;
  font-weight: 500;
}
.message-card {
  border-radius: 16rpx;
  background-color: rgba(255, 255, 255, 1);
  box-shadow: 0rpx 4rpx 12rpx 2rpx rgba(178, 178, 178, 0.4);
  padding: 20rpx;
}
.detail-card {
  border-radius: 16px 16px 0px 0px;
  position: absolute;
  width: 100%;
  top: 400rpx;
}
.card-title {
  color: rgb(21, 21, 21);
  font-size: 30rpx;
  text-align: left;
  font-weight: 500;
  margin-left: 12rpx;
}
.per-money {
  color: #101010;
  font-size: 30rpx;
  text-align: left;
  font-weight: 500;
}
.remark {
  line-height: 40rpx;
  color: rgba(136, 136, 136, 1);
  font-size: 28rpx;
  text-align: justify;
}
.recommendFoods {
  line-height: 66rpx;
  color: rgb(16, 16, 16);
  font-size: 48rpx;
  text-align: left;
}
.swiper-container {
  width: 100%;
  height: 446rpx;
}
::v-deep .wd-swiper-nav--bottom {
  bottom: 30px !important;
}
.title2 {
  color: rgb(59, 59, 59);
  font-size: 36rpx;
  text-align: left;
  font-weight: 500;
  height: 26px;
  overflow-y: scroll;
}
</style>
